<template>
	<view class="content">
		<uni-popup :show="type === 'quxiao'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">确定撤销吗？</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="chexiao()">确定</text>
				</view>
			</view>
		</uni-popup>
		
		<!-- <view class="decoration"></view> -->
		
		<view class="pageHeader">
			抢购设置
			<a class="generalBack" @click="backpage()" hover-class="none">
			 <image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			 </a>
			<text style="font-size: 28upx;position: absolute;bottom: 0upx;right: 40upx;" @click="autoset"> 自动设置</text>
		</view>
		<view class="regoodbox">
			<scroll-view scroll-y="true">
				<view class="buyitem" v-for="(item,index) in panicList" :key="index">
					<view class="flex aic jsb" style="padding-bottom:16upx;border-bottom: 2upx solid #eee;font-size: 26upx;">
						<view>设置抢购次数：{{item.set_num}}次</view>
						<view> 已抢购次数：<text style="color: #EC6104;">{{item.use_num}}次</text></view>
					</view>
					<view class="flex" style="position: relative;padding-top:20upx;">
						<view style="width: 146upx;height: 146upx;">
							<image :src="item.images" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="flex-1" style="font-size: 28upx;color: #666;">
							<view class="goods-info">{{item.title}}</view>
							<view style="margin-top:20upx;">
								<view><text style="color: #EC6104;">{{item.pay_price}}分</text> X {{item.set_num}}</view>
							</view>
							<view style="margin-top:16upx;">总计：{{item.pay_price*item.set_num}}分</view>
							<view style="margin-top:12upx;font-size:22upx;" class="flex aic">
								抢购状态：{{item.status_msg}}
							</view>
							<view style="color: #1D84E8;font-size: 26upx;margin-top: 16upx;" v-if="item.status==2">已退回{{item.return_price}}VS到账户</view>
						</view>
						<button class="surebtn chexiao"  v-if="item.status==0"  @click="cheproup(item,index)">撤销</button>
					</view>
				</view>
				<view class="loading">{{ loadingText }}</view>
			</scroll-view>
			<view style="text-align: center;margin-top:250upx" v-if="tips">
				<image style="width:240upx;height:230upx;" src="../../static/empty.png" mode=""></image>
				<text style="display:block;color:#999999;font-size: 30upx;">你还没有设置自动抢购的商品哦~</text>
			</view>
		</view>
	</view>
	</template>
	<script>
	import postAjax from '../../API/postAjax.js'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken:'',// token
				// 没数据
				tips:false,
				type:'',
				// 撤销的item
				cancleIndex:null,
				cancelItem:{},
				state:0,
				// 分页
				panicList: [],
				page : 0,
				loadingText: '加载中...'
			}
		},
		components: {
			uniPopup
		},
		onShow(){
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.getpanic();
		},
		onLoad(options) {
			
		},
		
		methods: {
			//滚动到底部
			onReachBottom:function(){
				this.getpanic();
			},
			togglePopup(type){
				this.type = type
			},
			// 返回上一页
			backpage(){
				uni.switchTab({
					url:"../tab/index"
				})
			},
			autoset(){
				uni.redirectTo({
					url:'setpanic',
					animationDuration:300
				})
			},
			// 出现撤销弹窗
			cheproup(item,index){
				let that = this
				that.cancleIndex  = index
				that.cancelItem = item
				that.type='quxiao'
			},
			// 撤销自动设置
			chexiao(){
				let that = this
				if(that.cancelItem.status==0){
					postAjax('Panicbuying/cancelAutoBuy',{
						token:that.userToken,
						id:that.cancelItem.id
					},function(data){
						if(data.code==0){
							uni.showToast({
								title: "撤销成功",						
							})
							that.page = 0 
							that.panicList = []
							that.getpanic();
							that.type=''
							// that.panicList.splice(that.cancleIndex,1)
						}else{
							uni.showToast({
								title: "撤销失败",
								icon:'none'
							})
						}
						
					})
				}
			},
			getpanic(){
				let that = this;
				uni.showNavigationBarLoading();
				let postdata = {
					token: that.userToken,
					m:that.page,
					n: 8
				};
				//自动抢购列表
				let fileLog = [];
				postAjax('Panicbuying/AutoBuySettingsList', postdata, function(data) {
					
					console.log(data)
					if (data.code == 0) {
						fileLog = data.data;
						if (fileLog.length > 0) {
							that.panicList = that.panicList.concat(fileLog);
							that.page++; //每触底一次 page +1
						}else{					
							that.loadingText = '已加载全部';				
						}
						if(that.panicList.length<10){
							that.loadingText = '';
						}
						if(that.panicList.length==0){
							that.tips = true
						}
					}else{
						that.getpanic()
					}
					uni.hideNavigationBarLoading();
				});
			}
		}
	}
	
</script>

<style>
	.loading {
		text-align: center;
		line-height: 50px;
		font-size: 30upx;
		color: #666;
	}
	.content{min-height: 100vh;background-color: #F9F9F9;position: relative;overflow: hidden;}
	.decoration{position: absolute;width:2000upx;height: 2000upx;border-radius: 50%;top:-110vh;background:linear-gradient(90deg,rgba(92,171,246,1) 0%,rgba(30,132,232,1) 100%);left: -1000upx;margin-left: 50%;}
	.pageHeader{width: 100%;height: 128upx;;line-height: 128upx;text-align: center;font-size: 36upx;color: #fff;padding-top: 40upx;position: relative;z-index: 101;background-color: #1D84E8;}
	.generalBack{position: absolute;top:40upx;left:30upx;display: block;}
	.surebtn{display: block;font-size: 28upx;width:170upx;background:#fff;border-radius: 10upx;position: absolute; bottom:10upx;right:20upx;height: 60upx;line-height: 60upx;}
	.chexiao{color: #EC6104;border:2upx solid #EC6104;padding: 0;}
	.hasdone{color: #999;border:2upx solid #999}
	.surebtn::after,.code::after{border: none;}
	.code{color: #007AFF;font-size: 30upx;border:none;display: inline-block;width:180upx;background-color: transparent;padding: 0;}
	.regoodbox{padding:0 30upx;position: relative;z-index: 100;margin-top: 30upx;}
	.buyitem{background-color: #fff;padding: 30upx 20upx;border-radius: 20upx;margin-bottom: 20upx;}
	.flex-1{flex:1;margin-left: 16upx;}
	.goods-info{overflow:hidden; text-overflow:ellipsis;white-space: nowrap;display: box;width: 420upx;}
	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}
	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}
	.uni-tip-content {
		padding: 20px 0;
		text-align: center;
		font-size: 16px;
		color: #666;
	}
	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15px;
		border-top: 1px solid #eee
	}
	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
</style>
